<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-xxx</title>
    <!-- 引入生产版本的vue.js -->
    <script src="../js/vue.js"></script>
    <style>
        /* 管理所有标签中有v-cloak属性的标签 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

    <!-- 
        v-text:
            1.作用：向其所在的节点中渲染文本内容。 (纯文本渲染)
			2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。这里有点不太灵活
        v-html指令：
            1.作用：向指定节点中渲染包含html结构的内容。
            2.与插值语法的区别：
                (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
                (2).v-html可以识别 html结构。
            3.严重注意：v-html有安全性问题！！！！
                (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
                (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

        v-cloak指令（没有值）：
            1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
            2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
     -->
    <div id="app">
        <h2 v-text="t1"></h2>
        <h2 v-html="h1"></h2>
        <h2 v-cloak>{{c1}}</h2>
    </div>


    <script>
        const vm = new Vue({
            el:"#app",
            data() {
                return {
                    t1: 'call me qq',
                    h1:'<h1>I Love You</h1>',
                    c1:'Hello cloak'
                };
            },
        })
    </script>
</body>
</html>